import React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
import { BottomTabBar } from 'react-navigation';
import {BoxShadow} from 'react-native-shadow';

let MainWidth = Dimensions.get('window').width;
export default class TabBar extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            bgGradient: new Animated.Value(0)
        }
    }

    _onItemLongPress() {
        
    }

   _onCenterPress() {
       console.log('查看信息');
   }

    renderItem = (index, route) => {
        const { navigation, jumpTo, activeTintColor, inactiveTintColor } = this.props;
        const focused = (index === navigation.state.index);
        const color = focused ? activeTintColor : inactiveTintColor;
        const TabScene = {
            focused,
            route,
            color
        };

        if(index === 2) {
            return (
                <TouchableOpacity
                    key={route.key}
                    activeOpacity={0.9}
                    onPress={this._onCenterPress}
                    style={styles.tabContent}
                    >
                    <View style={styles.tabItem}>
                        {this.props.renderIcon(TabScene)}
                    </View>
                </TouchableOpacity>
            );
        } else {
            return (
                <TouchableOpacity
                    key={route.key}
                    activeOpacity={0.9}
                    onPress={() => jumpTo(route.key)}
                    style={styles.tabContent}
                    onLongPress={() => console.log('长按时间')}
                    >
                    <View style={styles.tabItem}>
                        {this.props.renderIcon(TabScene)}
                        <Text style={{color, fontSize: 24, marginTop: 5}}>
                            { this.props.getLabelText(TabScene) }
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }
    }

    render() {
        console.log(this.props, '查看数据信息');
        const { navigation: { state: { routes } } } = this.props;

        const boxShadow = {
            width:720, //包裹的子内容多宽这里必须多宽
            height:120,//同上
            color:"#000",//阴影颜色
            border:4,//阴影宽度
            radius:22,//包裹的子元素圆角多少这里必须是多少
            opacity:0.1,//透明度
            x:0,
            y:0,
			style:{marginVertical:5}
            }
        return (
            <BoxShadow setting={boxShadow}>
                <View style={styles.tabContainer}>
                    {routes.map((item, index) => {
                        return this.renderItem(index, item);
                    })}
                </View>
            </BoxShadow>
        )
    }
}

const styles = StyleSheet.create({
    tabContainer: {
        width: 720,
        height: 120,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#fff'
    },
    tab: {
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderTopColor: 'rgba(0, 0, 0, 0.3)',
        borderTopWidth: 0.5,
        paddingBottom: 0
    },
    tabLine: {
        height: 0.5,
        backgroundColor: 'rgba(100, 100, 100, 0.3)'
    },
    tabContent: {
        width: MainWidth * 0.2,
        height: 100,
        alignItems: 'center',
        justifyContent: 'center'
    },
    tabItem: {
        height: 100,
        width: 100,
        alignItems: 'center',
        justifyContent: 'center'
    }
})